<template>
	<view>
		<view class="audio" @tap="play = !play">
			<view v-if="loading" class="loading"></view>
			<view v-if="!loading && !play" class="options-play"></view>
			<view v-if="!loading && play" class="option-pause"></view>
			<view v-if="!loading && play" class="wave"></view>
			<view class="time">{{time}}''</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			src: String,
			duration: Number
		},
		data(){
			return{
				play: false,
				time: 0,
				innerAudioContext: '',
				timer: '',
				loading: false
			}
		},
		created() {
			this.innerAudioContext = uni.createInnerAudioContext()
			this.innerAudioContext.autoplay = false;
			this.innerAudioContext.src = this.src
			this.time = this.duration
			
			this.innerAudioContext.onPlay(() => {
				this.loading = false
				this.timming()
			})
			this.innerAudioContext.onStop(() => {
				clearInterval(this.timer)
				this.time = this.duration
			})
		},
		destroyed(){
			this.innerAudioContext.destroy()
		},
		watch:{
			play(e){
				//播放
				if(e){
					this.loading = true
					this.innerAudioContext.play()
				}
				//停止
				else{
					this.innerAudioContext.stop()
				}
			}
		},
		methods:{
			//计时器
			timming(){
				this.timer = setInterval(()=>{
					this.time --
					if(this.time == 0){
						this.play = false
						this.time = this.duration
						clearInterval(this.timer)
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.audio{
		width: 200rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background: linear-gradient(45deg, #71c1fd, #1296db);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx 10rpx 20rpx;
		position: relative;
		.option-pause{
			width: 0;
			height: 0;
			position: relative;
			top: -12rpx;
		}
		.option-pause::before{
			content: "";
			width: 8rpx;
			height: 25rpx;
			border-radius: 4rpx;
			background-color: #fff;
			position: absolute;
			left: 0;
		}
		.option-pause::after{
			content: "";
			width: 8rpx;
			height: 25rpx;
			border-radius: 4rpx;
			background-color: #fff;
			position: absolute;
			left: 15rpx;
		}
		.options-play{
			width: 0;
			height: 0;
			border-radius: 4rpx;
			border-top: 12.5rpx solid transparent;
			border-right: 12.5rpx solid transparent;
			border-bottom: 12.5rpx solid transparent;
			border-left: 15rpx solid #fff;
		}
		.wave{
			width: 8rpx;
			height: 25rpx;
			border-radius: 4rpx;
			background-color: #fff;
			position: absolute;
			left: 45%;
			animation: 1.2s wave-move-center infinite;
		}
		.wave::before{
			content: "";
			width: 8rpx;
			height: 10rpx;
			border-radius: 4rpx;
			background-color: #fff;
			position: absolute;
			top: 8rpx;
			left: -15rpx;
			animation: 1.2s wave-move-side infinite;
		}
		.wave::after{
			content: "";
			width: 8rpx;
			height: 10rpx;
			border-radius: 4rpx;
			background-color: #fff;
			position: absolute;
			top: 8rpx;
			right: -15rpx;
			animation: 1.2s wave-move-side infinite;
		}
		@keyframes wave-move-center{
			0%{
				transform: scaleY(1);
			}
			50%{
				transform: scaleY(0.4);
			}
			100%{
				transform: scaleY(1);
			}
		}
		@keyframes wave-move-side{
			0%{
				transform: scaleY(1);
			}
			50%{
				transform: scaleY(5);
				border-radius: 3rpx;
			}
			100%{
				transform: scaleY(1);
			}
		}
		
		.time{
			font-size: 30rpx;
			color: #fff;
		}
		
		.loading{
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: transparent;
			border-top: 5rpx solid #fff;
			border-right: 5rpx solid transparent;
			border-bottom: 5rpx solid #fff;
			border-left: 5rpx solid transparent;
			animation: 2s loading linear infinite;
		}
		
		@keyframes loading{
			to{
				transform: rotate(360deg);
			}
		}
	}
</style>
